<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body class="reference">
<div class="reference-class">
<h1>Project</h1>

<p>A Project object in Paper.js is what usually is referred to as the
document: The top level object that holds all the items contained in the
scene graph. As the term document is already taken in the browser context,
it is called Project.</p>
<p>Projects allow the manipulation of the styles that are applied to all newly
created items, give access to the selected items, and will in future versions
offer ways to query for items in the scene graph defining specific
requirements, and means to persist and load from different formats, such as
SVG and PDF.</p>
<p>The currently active project can be accessed through the
<a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> variable.</p>
<p>An array of all open projects is accessible through the
<a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> variable.</p>

</div>

<!-- ============================== constructors ========================= -->
<div class="reference-members"><h2>Constructors</h2>
	
		
<div id="project-element" class="member">
<div class="member-link">
<a name="project-element" href="#project-element"><tt><b>Project</b>(element)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a Paper.js project containing one empty <a href="../classes/Layer.html"><tt>Layer</tt></a>, referenced
by <a href="../classes/Project.html#activelayer"><tt>project.activeLayer</tt></a>.</p>
<p>Note that when working with PaperScript, a project is automatically
created for us and the <a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> variable points to it.</p>

<ul><b>Parameters:</b>

<li>
<tt>element:</tt> 
<tt>HTMLCanvasElement</tt> / <tt>String</tt>
&mdash;&nbsp;the HTML canvas element that
should be used as the element for the view, or an ID string by which to
find the element.

</li>

</ul>




</div>
</div>
</div>
	
</div>





	<div class="reference-members"><h2>Properties</h2>
		
			
<div id="view" class="member">
<div class="member-link">
<a name="view" href="#view"><tt><b>view</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The reference to the project's view.</p>
	
		<p>Read only.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<a href="../classes/View.html"><tt>View</tt></a>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="currentstyle" class="member">
<div class="member-link">
<a name="currentstyle" href="#currentstyle"><tt><b>currentStyle</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The currently active path style. All selected items and newly
created items will be styled with this style.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<a href="../classes/Style.html"><tt>Style</tt></a>
	</li>
	</ul>
	
	<p>
<b>Example</b> 
</p>

<div class="paperscript split">

<div class="buttons">
<div class="button run">Run</div>
</div>

<script type="text/paperscript" canvas="canvas-0">
project.currentStyle = {
    fillColor: 'red',
    strokeColor: 'black',
    strokeWidth: 5
}

// The following paths will take over all style properties of
// the current style:
var path = new Path.Circle(new Point(75, 50), 30);
var path2 = new Path.Circle(new Point(175, 50), 20);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
</div>


<p>
<b>Example</b> 
</p>

<div class="paperscript split">

<div class="buttons">
<div class="button run">Run</div>
</div>

<script type="text/paperscript" canvas="canvas-1">
project.currentStyle.fillColor = 'red';

// The following path will take over the fill color we just set:
var path = new Path.Circle(new Point(75, 50), 30);
var path2 = new Path.Circle(new Point(175, 50), 20);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
</div>


</div>

</div>
</div>
		
			
<div id="index" class="member">
<div class="member-link">
<a name="index" href="#index"><tt><b>index</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The index of the project in the <a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> list.</p>
	
		<p>Read only.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<tt>Number</tt>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="selecteditems" class="member">
<div class="member-link">
<a name="selecteditems" href="#selecteditems"><tt><b>selectedItems</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The selected items contained within the project.</p>
	
		<p>Read only.</p>
	
	
	<ul><b>Type:</b>
	<li>
		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
	<h3>Project Hierarchy</h3>

<div id="layers" class="member">
<div class="member-link">
<a name="layers" href="#layers"><tt><b>layers</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The layers contained within the project.</p>
	
	
	<ul><b>Type:</b>
	<li>
		Array of <a href="../classes/Layer.html"><tt>Layer</tt></a> objects
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="activelayer" class="member">
<div class="member-link">
<a name="activelayer" href="#activelayer"><tt><b>activeLayer</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The layer which is currently active. New items will be created on this
layer by default.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<a href="../classes/Layer.html"><tt>Layer</tt></a>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="symbols" class="member">
<div class="member-link">
<a name="symbols" href="#symbols"><tt><b>symbols</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The symbols contained within the project.</p>
	
	
	<ul><b>Type:</b>
	<li>
		Array of <a href="../classes/Symbol.html"><tt>Symbol</tt></a> objects
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
	</div>



<!-- ============================== methods ================================ -->
	<div class="reference-members"><h2>Methods</h2>
		
			
<div id="activate" class="member">
<div class="member-link">
<a name="activate" href="#activate"><tt><b>activate</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Activates this project, so all newly created items will be placed
in it.</p>
	
	
	
	
</div>
</div>
</div>
		
			
<div id="clear" class="member">
<div class="member-link">
<a name="clear" href="#clear"><tt><b>clear</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Clears the project by removing all <a href="../classes/Project.html#layers"><tt>project.layers</tt></a> and
<a href="../classes/Project.html#symbols"><tt>project.symbols</tt></a>.</p>
	
	
	
	
</div>
</div>
</div>
		
			
<div id="isempty" class="member">
<div class="member-link">
<a name="isempty" href="#isempty"><tt><b>isEmpty</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Checks whether the project has any content or not. Note that since
projects by default are created with one empty layer, this returns also
<tt>true</tt> if that layer exists but is itself empty.</p>
	
	
	<ul><b>Returns:</b>
	
		<li>
<tt></tt>&nbsp;&mdash;&nbsp;Boolean
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
			
<div id="remove" class="member">
<div class="member-link">
<a name="remove" href="#remove"><tt><b>remove</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Removes this project from the <a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> list, and also
removes its view, if one was defined.</p>
	
	
	
	
</div>
</div>
</div>
		
			
<div id="selectall" class="member">
<div class="member-link">
<a name="selectall" href="#selectall"><tt><b>selectAll</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Selects all items in the project.</p>
	
	
	
	
</div>
</div>
</div>
		
			
<div id="deselectall" class="member">
<div class="member-link">
<a name="deselectall" href="#deselectall"><tt><b>deselectAll</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Deselects all selected items in the project.</p>
	
	
	
	
</div>
</div>
</div>
		
			
<div id="hittest-point" class="member">
<div class="member-link">
<a name="hittest-point" href="#hittest-point"><tt><b>hitTest</b>(point[, options])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Perform a hit test on the items contained within the project at the
location of the specified point.</p>
<p>The options object allows you to control the specifics of the hit test
and may contain a combination of the following values:</p>
<p><b>options.tolerance:</b> <tt>Number</tt> – the tolerance of the hit test
in points, can also be controlled through
<a href="../classes/Project.html#options"><tt>project.options</tt></a><tt>.hitTolerance</tt>.</p>
<p><b>options.class:</b> Only hit test again a certain item class and its
sub-classes: <tt>Group, Layer, Path, CompoundPath, Shape, Raster,
PlacedSymbol, PointText</tt>, etc.</p>
<p><b>options.fill:</b> <tt>Boolean</tt> – hit test the fill of items.</p>
<p><b>options.stroke:</b> <tt>Boolean</tt> – hit test the stroke of path
items, taking into account the setting of stroke color and width.</p>
<p><b>options.segments:</b> <tt>Boolean</tt> – hit test for
<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
<p><b>options.curves:</b> <tt>Boolean</tt> – hit test the curves of path
items, without taking the stroke color or width into account.</p>
<p><b>options.handles:</b> <tt>Boolean</tt> – hit test for the handles
(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
<p><b>options.ends:</b> <tt>Boolean</tt> – only hit test for the first or
last segment points of open path items.</p>
<p><b>options.bounds:</b> <tt>Boolean</tt> – hit test the corners and
side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
<p><b>options.center:</b> <tt>Boolean</tt> – hit test the
<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
<p><b>options.guides:</b> <tt>Boolean</tt> – hit test items that have
<tt>Item#guide</tt> set to <tt>true</tt>.</p>
<p><b>options.selected:</b> <tt>Boolean</tt> – only hit selected items.</p>
	
<ul><b>Parameters:</b>

<li>
<tt>point:</tt> 
<a href="../classes/Point.html"><tt>Point</tt></a>
&mdash;&nbsp;The point where the hit test should be performed

</li>

<li>
<tt>options:</tt> 
<tt>Object</tt>

&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
tolerance: true }</tt>
</li>

</ul>

	
	<ul><b>Returns:</b>
	
		<li>
<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;a hit result object that contains more
information about what exactly was hit or <tt>null</tt> if nothing was
hit
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
			
<div id="getitems-match" class="member">
<div class="member-link">
<a name="getitems-match" href="#getitems-match"><tt><b>getItems</b>(match)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Fetch items contained within the project whose properties match the
criteria in the specified object.</p>
<p>Extended matching is possible by providing a compare function or
regular expression. Matching points, colors only work as a comparison
of the full object, not partial matching (e.g. only providing the x-
coordinate to match all points with that x-value). Partial matching
does work for <a href="../classes/Item.html#data"><tt>item.data</tt></a>.</p>
	
<ul><b>Parameters:</b>

<li>
<tt>match:</tt> 
<tt>Object</tt>
&mdash;&nbsp;The criteria to match against.

</li>

</ul>

	
	<ul><b>Returns:</b>
	
		<li>
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>
</li>
	
	</ul>

	
	<p>
<b>Example</b> &mdash; Fetch all selected path items:
</p>

<div class="paperscript split">

<div class="buttons">
<div class="button run">Run</div>
</div>

<script type="text/paperscript" canvas="canvas-2">
var path1 = new Path.Circle({
    center: [50, 50],
    radius: 25,
    fillColor: 'black'
});

var path2 = new Path.Circle({
    center: [150, 50],
    radius: 25,
    fillColor: 'black'
});

// Select path2:
path2.selected = true;

// Fetch all selected path items:
var items = project.getItems({
    selected: true,
    class: Path
});

// Change the fill color of the selected path to red:
items[0].fillColor = 'red';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
</div>


<p>
<b>Example</b> &mdash; Fetch all items with a specific fill color:
</p>

<div class="paperscript split">

<div class="buttons">
<div class="button run">Run</div>
</div>

<script type="text/paperscript" canvas="canvas-3">
var path1 = new Path.Circle({
    center: [50, 50],
    radius: 25,
    fillColor: 'black'
});

var path2 = new Path.Circle({
    center: [150, 50],
    radius: 25,
    fillColor: 'purple'
});

// Fetch all items with a purple fill color:
var items = project.getItems({
    fillColor: 'purple'
});

// Select the fetched item:
items[0].selected = true;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
</div>


<p>
<b>Example</b> &mdash; Fetch items at a specific position:
</p>

<div class="paperscript split">

<div class="buttons">
<div class="button run">Run</div>
</div>

<script type="text/paperscript" canvas="canvas-4">
var path1 = new Path.Circle({
    center: [50, 50],
    radius: 25,
    fillColor: 'black'
});

var path2 = new Path.Circle({
    center: [150, 50],
    radius: 25,
    fillColor: 'black'
});

// Fetch all path items positioned at {x: 150, y: 150}:
var items = project.getItems({
    position: [150, 50]
});

// Select the fetched path:
items[0].selected = true;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
</div>


<p>
<b>Example</b> &mdash; Fetch items using a comparing function:
</p>

<div class="paperscript split">

<div class="buttons">
<div class="button run">Run</div>
</div>

<script type="text/paperscript" canvas="canvas-5">
// Create a circle shaped path:
var path1 = new Path.Circle({
    center: [50, 50],
    radius: 25,
    fillColor: 'black'
});

// Create a circle shaped path with 50% opacity:
var path2 = new Path.Circle({
    center: [150, 50],
    radius: 25,
    fillColor: 'black',
    opacity: 0.5
});

// Fetch all items whose opacity is smaller than 1
var items = paper.project.getItems({
    opacity: function(value) {
        return value < 1;
    }
});

// Select the fetched item:
items[0].selected = true;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
</div>


<p>
<b>Example</b> &mdash; Fetch items using a comparing function (2):
</p>

<div class="paperscript split">

<div class="buttons">
<div class="button run">Run</div>
</div>

<script type="text/paperscript" canvas="canvas-6">
// Create a rectangle shaped path (4 segments):
var path1 = new Path.Rectangle({
    from: [25, 25],
    to: [75, 75],
    strokeColor: 'black',
    strokeWidth: 10
});

// Create a line shaped path (2 segments):
var path2 = new Path.Line({
    from: [125, 50],
    to: [175, 50],
    strokeColor: 'black',
    strokeWidth: 10
});

// Fetch all paths with 2 segments:
var items = project.getItems({
    class: Path,
 segments: function(segments) {
        return segments.length == 2;
 }
});

// Select the fetched path:
items[0].selected = true;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
</div>


<p>
<b>Example</b> &mdash; Match (nested) properties of the data property:
</p>

<div class="paperscript split">

<div class="buttons">
<div class="button run">Run</div>
</div>

<script type="text/paperscript" canvas="canvas-7">
// Create a black circle shaped path:
var path1 = new Path.Circle({
    center: [50, 50],
    radius: 25,
    fillColor: 'black',
    data: {
        person: {
            name: 'john',
            length: 200,
            hair: true
        }
    }
});

// Create a red circle shaped path:
var path2 = new Path.Circle({
    center: [150, 50],
    radius: 25,
    fillColor: 'red',
    data: {
        person: {
            name: 'john',
            length: 180,
            hair: false
        }
    }
});

// Fetch all items whose data object contains a person
// object whose name is john and length is 180:
var items = paper.project.getItems({
    data: {
        person: {
            name: 'john',
            length: 180
        }
    }
});

// Select the fetched item:
items[0].selected = true;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
</div>


<p>
<b>Example</b> &mdash; Match strings using regular expressions:
</p>

<div class="paperscript split">

<div class="buttons">
<div class="button run">Run</div>
</div>

<script type="text/paperscript" canvas="canvas-8">
// Create a path named 'aardvark':
var path1 = new Path.Circle({
    center: [50, 50],
    radius: 25,
    fillColor: 'black',
    name: 'aardvark'
});

// Create a path named 'apple':
var path2 = new Path.Circle({
    center: [150, 50],
    radius: 25,
    fillColor: 'black',
    name: 'apple'
});

// Create a path named 'banana':
var path2 = new Path.Circle({
    center: [250, 50],
    radius: 25,
    fillColor: 'black',
    name: 'banana'
});

// Fetch all items that have a name starting with 'a':
var items = project.getItems({
    name: /^a/
});

// Change the fill color of the matched items:
for (var i = 0; i < items.length; i++) {
 items[i].fillColor = 'red';
}
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
</div>


</div>
</div>
</div>
		
			
<div id="getitem-match" class="member">
<div class="member-link">
<a name="getitem-match" href="#getitem-match"><tt><b>getItem</b>(match)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Fetch the first item contained within the project whose properties
match the criteria in the specified object.</p>
<p>Extended matching is possible by providing a compare function or
regular expression. Matching points, colors only work as a comparison
of the full object, not partial matching (e.g. only providing the x-
coordinate to match all points with that x-value). Partial matching
does work for <a href="../classes/Item.html#data"><tt>item.data</tt></a>.</p>
	
<ul><b>Parameters:</b>

<li>
<tt>match:</tt> 
<tt>Object</tt>
&mdash;&nbsp;The criteria to match against.

</li>

</ul>

	
	<ul><b>Returns:</b>
	
		<li>
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>
</li>
	
	</ul>

	
	<p>
<b>Example</b> &mdash; Fetch all selected path items:
</p>

<div class="paperscript split">

<div class="buttons">
<div class="button run">Run</div>
</div>

<script type="text/paperscript" canvas="canvas-9">
var path1 = new Path.Circle({
    center: [50, 50],
    radius: 25,
    fillColor: 'black'
});

var path2 = new Path.Circle({
    center: [150, 50],
    radius: 25,
    fillColor: 'black'
});

// Select path2:
path2.selected = true;

// Fetch first select path items:
var item = project.getItem({
    selected: true,
    class: Path
});

// Change the fill color of the selected path to red:
item.fillColor = 'red';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
</div>


<p>
<b>Example</b> &mdash; Fetch item with a specific fill color:
</p>

<div class="paperscript split">

<div class="buttons">
<div class="button run">Run</div>
</div>

<script type="text/paperscript" canvas="canvas-10">
var path1 = new Path.Circle({
    center: [50, 50],
    radius: 25,
    fillColor: 'black'
});

var path2 = new Path.Circle({
    center: [150, 50],
    radius: 25,
    fillColor: 'purple'
});

// Fetch first item with a purple fill color:
var item = project.getItem({
    fillColor: 'purple'
});

// Select the fetched item:
item.selected = true;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
</div>


<p>
<b>Example</b> &mdash; Fetch item at a specific position:
</p>

<div class="paperscript split">

<div class="buttons">
<div class="button run">Run</div>
</div>

<script type="text/paperscript" canvas="canvas-11">
var path1 = new Path.Circle({
    center: [50, 50],
    radius: 25,
    fillColor: 'black'
});

var path2 = new Path.Circle({
    center: [150, 50],
    radius: 25,
    fillColor: 'black'
});

// Fetch path item positioned at {x: 150, y: 150}:
var item = project.getItem({
    position: [150, 50]
});

// Select the fetched path:
item.selected = true;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
</div>


<p>
<b>Example</b> &mdash; Fetch item using a comparing function:
</p>

<div class="paperscript split">

<div class="buttons">
<div class="button run">Run</div>
</div>

<script type="text/paperscript" canvas="canvas-12">
// Create a circle shaped path:
var path1 = new Path.Circle({
    center: [50, 50],
    radius: 25,
    fillColor: 'black'
});

// Create a circle shaped path with 50% opacity:
var path2 = new Path.Circle({
    center: [150, 50],
    radius: 25,
    fillColor: 'black',
    opacity: 0.5
});

// Fetch first item whose opacity is smaller than 1
var item = paper.project.getItem({
    opacity: function(value) {
        return value < 1;
    }
});

// Select the fetched item:
item.selected = true;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
</div>


<p>
<b>Example</b> &mdash; Fetch item using a comparing function (2):
</p>

<div class="paperscript split">

<div class="buttons">
<div class="button run">Run</div>
</div>

<script type="text/paperscript" canvas="canvas-13">
// Create a rectangle shaped path (4 segments):
var path1 = new Path.Rectangle({
    from: [25, 25],
    to: [75, 75],
    strokeColor: 'black',
    strokeWidth: 10
});

// Create a line shaped path (2 segments):
var path2 = new Path.Line({
    from: [125, 50],
    to: [175, 50],
    strokeColor: 'black',
    strokeWidth: 10
});

// Fetch first path with 2 segments:
var item = project.getItem({
    class: Path,
 segments: function(segments) {
        return segments.length == 2;
 }
});

// Select the fetched path:
item.selected = true;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
</div>


<p>
<b>Example</b> &mdash; Match (nested) properties of the data property:
</p>

<div class="paperscript split">

<div class="buttons">
<div class="button run">Run</div>
</div>

<script type="text/paperscript" canvas="canvas-14">
// Create a black circle shaped path:
var path1 = new Path.Circle({
    center: [50, 50],
    radius: 25,
    fillColor: 'black',
    data: {
        person: {
            name: 'john',
            length: 200,
            hair: true
        }
    }
});

// Create a red circle shaped path:
var path2 = new Path.Circle({
    center: [150, 50],
    radius: 25,
    fillColor: 'red',
    data: {
        person: {
            name: 'john',
            length: 180,
            hair: false
        }
    }
});

// Fetch item whose data object contains a person
// object whose name is john and length is 180:
var item = paper.project.getItem({
    data: {
        person: {
            name: 'john',
            length: 180
        }
    }
});

// Select the fetched item:
item.selected = true;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
</div>


<p>
<b>Example</b> &mdash; Match strings using regular expressions:
</p>

<div class="paperscript split">

<div class="buttons">
<div class="button run">Run</div>
</div>

<script type="text/paperscript" canvas="canvas-15">
// Create a path named 'aardvark':
var path1 = new Path.Circle({
    center: [50, 50],
    radius: 25,
    fillColor: 'black',
    name: 'aardvark'
});

// Create a path named 'apple':
var path2 = new Path.Circle({
    center: [150, 50],
    radius: 25,
    fillColor: 'black',
    name: 'apple'
});

// Fetch the first item that has a name starting with 'a':
var item = project.getItem({
    name: /^a/
});

// Change the fill color of the matched item:
item.fillColor = 'red';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
</div>


</div>
</div>
</div>
		
			
<h3>Importing / Exporting JSON and SVG</h3>

<div id="exportjson" class="member">
<div class="member-link">
<a name="exportjson" href="#exportjson"><tt><b>exportJSON</b>([options])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Exports (serializes) the project with all its layers and child items to
a JSON data string.</p>
<p>The options object offers control over some aspects of the SVG export:</p>
<p><b>options.asString:</b> <tt>Boolean</tt> – whether the JSON is returned
as a <tt>Object</tt> or a <tt>String</tt>.</p>
<p><b>options.precision:</b> <tt>Number</tt> – the amount of fractional
digits in numbers used in JSON data.</p>
	
<ul><b>Parameters:</b>

<li>
<tt>options:</tt> 
<tt>Object</tt>
&mdash;&nbsp;the
serialization options
&mdash;&nbsp;optional, default: <tt>{ asString: true, precision: 5 }</tt>
</li>

</ul>

	
	<ul><b>Returns:</b>
	
		<li>
<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;the exported JSON data
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
			
<div id="importjson-json" class="member">
<div class="member-link">
<a name="importjson-json" href="#importjson-json"><tt><b>importJSON</b>(json)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Imports (deserializes) the stored JSON data into the project.</p>
<p>Note that the project is not cleared first. You can call
<a href="../classes/Project.html#clear"><tt>project.clear</tt></a>() to do so.</p>
	
<ul><b>Parameters:</b>

<li>
<tt>json:</tt> 
<tt>String</tt>
&mdash;&nbsp;the JSON data to import from.

</li>

</ul>

	
	
	
</div>
</div>
</div>
		
			
<div id="exportsvg" class="member">
<div class="member-link">
<a name="exportsvg" href="#exportsvg"><tt><b>exportSVG</b>([options])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Exports the project with all its layers and child items as an SVG DOM,
all contained in one top level SVG group node.</p>
<p>The options object offers control over some aspects of the SVG export:</p>
<p><b>options.asString:</b> <tt>Boolean</tt> – whether a SVG node or a
<tt>String</tt> is to be returned.</p>
<p><b>options.precision:</b> <tt>Number</tt> – the amount of fractional
digits in numbers used in SVG data.</p>
<p><b>options.matchShapes:</b> <tt>Boolean</tt> – whether imported path
items should tried to be converted to shape items, if their geometries
match.</p>
	
<ul><b>Parameters:</b>

<li>
<tt>options:</tt> 
<tt>Object</tt>
&mdash;&nbsp;the export options.
&mdash;&nbsp;optional, default: <tt>{ asString: false, precision: 5,
matchShapes: false }</tt>
</li>

</ul>

	
	<ul><b>Returns:</b>
	
		<li>
<tt><tt>SVGElement</tt></tt>&nbsp;&mdash;&nbsp;the project converted to an SVG node
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
			
<div id="importsvg-svg" class="member">
<div class="member-link">
<a name="importsvg-svg" href="#importsvg-svg"><tt><b>importSVG</b>(svg[, options])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Converts the provided SVG content into Paper.js items and adds them to
the active layer of this project.</p>
<p>Note that the project is not cleared first. You can call
<a href="../classes/Project.html#clear"><tt>project.clear</tt></a>() to do so.</p>
<p>The options object offers control over some aspects of the SVG import:</p>
<p><b>options.expandShapes:</b> <tt>Boolean</tt> – whether imported shape
items should be expanded to path items.</p>
	
<ul><b>Parameters:</b>

<li>
<tt>svg:</tt> 
<tt>SVGElement</tt> / <tt>String</tt>
&mdash;&nbsp;the SVG content to import

</li>

<li>
<tt>options:</tt> 
<tt>Object</tt>
&mdash;&nbsp;the import options
&mdash;&nbsp;optional, default: <tt>{ expandShapes: false }</tt>
</li>

</ul>

	
	<ul><b>Returns:</b>
	
		<li>
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the imported Paper.js parent item
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
	</div>




<!-- =========================== copyright notice ========================= -->
<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>

</body>